@charset "UTF-8";
.inner {
  width: 50%;
  margin: 0 auto;
}

.inner .part-1 {
  margin-bottom: 20px;
}

.inner .part-1 h2 {
  border-bottom: 3px solid #000;
}

.inner .part-1 .content {
  width: 100%;
  padding: 2%;
}

.inner .part-1 .content .example {
  margin: 20px 0;
}

.inner .part-1 .content .example .aa {
  width: 100px;
  height: 100px;
  background-color: #0ec569;
}

.inner .part-1 .content .example .bb {
  background-color: #999;
}

.inner .part-1 .content .example .cc {
  width: 100px;
  height: 200px;
  background-color: #aa3344;
}

.inner .part-2 {
  margin-bottom: 20px;
}

.inner .part-2 h2 {
  border-bottom: 3px solid #000;
}

.inner .part-2 .content {
  width: 100%;
  padding: 2%;
}

.inner .part-2 .content .example {
  margin: 20px 0;
}

.inner .part-2 .content .example {
  border: 1px solid #000;
}

.inner .part-2 .content .example div {
  width: 100px;
  height: 50px;
  background-color: #e64cde;
  margin: 10px 20px;
  float: left;
}

.inner .part-3 {
  margin-bottom: 20px;
}

.inner .part-3 h2 {
  border-bottom: 3px solid #000;
}

.inner .part-3 .content {
  width: 100%;
  padding: 2%;
}

.inner .part-3 .content .example {
  margin: 20px 0;
}

.inner .part-3 .content .example .pic {
  width: 100px;
  height: 50px;
  background-color: #5c82c7;
}

.inner .part-4 {
  margin-bottom: 20px;
}

.inner .part-4 h2 {
  border-bottom: 3px solid #000;
}

.inner .part-4 .content {
  width: 100%;
  padding: 2%;
}

.inner .part-4 .content .example {
  margin: 20px 0;
}

.inner .part-4 .content .example .pic {
  width: 50%;
  min-width: 200px;
}

.inner .part-4 .content .example .pic img {
  width: 100%;
  height: auto;
}

.inner .part-4 .content .example ul li span {
  width: 40%;
  float: left;
}

.inner .part-4 .content .example ul li i {
  margin-left: 10px;
}

.inner .part-4 .content .example2 .pic {
  width: 25%;
  min-width: 50px;
}

.inner .part-4 .content .example2 .pic img {
  width: 100%;
}

.inner .part-4 .content .example2 .words {
  margin-left: 30%;
}

.decoration .trans1 {
  transition: .5s;
  cursor: pointer;
}

.decoration .trans1:hover {
  text-decoration: underline solid #DD4F42;
  font-weight: bold;
}

.decoration .animation {
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  line-height: 2;
}

.decoration .animation::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  white-space: nowrap;
  text-decoration: underline wavy #000;
  z-index: -1;
}

.decoration .animation:hover::before {
  animation: move 3s infinite linear;
}

.decoration .anim2 a {
  background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
  background-size: 0 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: 1s all;
  color: #0cc;
}

.decoration .anim2 a:hover {
  background-size: 100% 3px;
  color: #000;
}

@keyframes move {
  100% {
    transform: translate(-209px, 0);
  }
}

.gray {
  filter: gray !important;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

.filter_box img {
  width: 200px;
  height: auto;
}

.filter_box .p1 {
  /* 使用SVG filter */
  filter: blur(2px);
}

.filter_box .p2 {
  filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, 0.7));
}

#div1 {
  width: 300px;
  height: 200px;
  background-color: red;
}

#div2 {
  width: 250px;
  height: 150px;
  background-color: green;
}

#div3 {
  width: 200px;
  height: 100px;
  background-color: blue;
}
